<template>
    <div>
        <!--        主页表格-->
        <el-table
                :data="coursesList"
                border
                style="width: 1200px"
                color:black
                :header-cell-style="{'background-color':'#409EFF',
color:'#fff'}">
            <el-table-column
                    fixed
                    prop="favoriteId"
                    label="ID"
                    width="150">
            </el-table-column>

            <el-table-column
                    prop="courseImageUrl"
                    label="图片"
                    width="150">
                <template slot-scope="scope">
                    <span v-html="showImage(scope.row)"></span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="courseName"
                    label="课程名字"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="isPaid"
                    label="收藏状态"
                    width="180">
                <template slot-scope="scope">
                    <span v-html="showIsPaid(scope.row)"></span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="users.userName"
                    label="用户名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="180">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleClick(scope.row),dialogFormVisible3 = true">收藏切换</el-button>
                </template>
            </el-table-column>

        </el-table>
    </div>
</template>


<script>
    export default {

        name: "kechengshoucang",
        data(){
            return{
                coursesList:"",
                dialogFormVisible3:false,
                statute:"",
                // isPaid:"",
            }
        },
        created() {//默认请求全部商品
            // 调用查询用户方法
            this.axios.post("/favorite/SelectCourseFavoriteListAll", {
            }).then((res)=>{
                this.coursesList=res.data.data;
                console.log(res.data.data);
                // this.isPaid = res.data.data.isPaid;
            }).catch((err)=>{
            });
        },
        methods:{
            handleClick(row){
                console.log(row);
                //在vue中切换传入的值
                if (row.isPaid === 0){
                    row.isPaid = 1
                }else{
                    row.isPaid = 0
                }
                //更改完成之后传值到数据库更改数据库状态
                this.axios.post("/favorite/UpdateCourseFavoriteList",{
                    favoriteId:row.favoriteId,
                    isPaid:row.isPaid,
                }).then((res)=>{
                    console.log(res.data);
                }).catch((err)=>{

                });
                window.location.reload(); //页面重新加载
            },
            showImage(row){
                return `<img src="${row.courseImageUrl}" style="width: 100%;">`;
            },
            //传入的0/1使其展示为汉字信息
            showIsPaid(row){
                return row.isPaid === 1 ? '已收藏' : '未收藏';
            },

        },
    }
</script>

<style scoped>

</style>